<template>
	<view class="main-container">
		<scroll-view class="main-context" scroll-y>
			<view v-if="customerCouponList.length > 0" class="main-context-container">
				<view v-for="(item, index) in customerCouponList" :key="item.Id" class="customer-coupon-item" :style="{ backgroundImage: 'url( ' + couponImg + ' )' }">
					<view v-on:click="selectCoupon(item)" class="customer-coupon-item-context">
						<view class="context-left">
							<view class="coupon-left-container">
								<view style="margin-top: 30rpx; margin-bottom: 20rpx;">
									<text class="coupon-amout-unit">￥</text>
									<text class="coupon-amout">{{ item.Amount }}</text>
								</view>
								<view class="coupon-min">满{{ item.Min }}元可用</view>
							</view>
						</view>
						<view class="context-middle">
							<view class="context-middle-context">
								<view style="margin-bottom: 20rpx;">
									<text class="coupon-type-name">{{ item.TypeName }}</text>
								</view>
								<view class="coupon-name">{{ item.Name }}</view>
								<view class="coupon-time-container">
									{{ item.StartTimeStr | formatTime }}
									<span>至</span>
									{{ item.EndTimeStr | formatTime }}
								</view>
							</view>
						</view>
						<view class="context-right"><radio :checked="item.IsActive" :disabled="!item.IsEnabled" /></view>
					</view>
				</view>
			</view>
			<view v-else class="no-coupon"><view>无可用优惠券</view></view>
		</scroll-view>
		<view class="bottom-operation-container">
			<view class="bottom-operatio-btn" @click="cancelBtn" style="color: #999999;">取消</view>
			<view class="bottom-middle-line"></view>
			<view class="bottom-operatio-btn" @click="confirmSelectedCoupon" style="color: #333333;">确定</view>
		</view>
		<uni-popup ref="couponDetailPopup" type="center">
			<view class="coupon-param-contianer">
				<view class="coupon-detail-item">
					<view class="coupon-detail-item-title">有效日期</view>
					<view class="coupon-detail-item-content">{{ couponDetail.StartTimeStr | formatTime }}至{{ couponDetail.EndTimeStr | formatTime }}</view>
				</view>
				<view class="coupon-detail-item">
					<view class="coupon-detail-item-title">使用范围</view>
					<view class="coupon-detail-item-content">满{{ couponDetail.Min }}元可用</view>
				</view>
				<view class="coupon-detail-item">
					<view class="coupon-detail-item-title">可用时间</view>
					<view class="coupon-detail-item-content">{{ couponParam.OkWeek }} {{ couponParam.OkDay }}</view>
				</view>
				<view class="coupon-detail-item">
					<view class="coupon-detail-item-title">优惠说明</view>
					<view class="coupon-detail-item-content">{{ couponParam.Remarks }}</view>
				</view>
				<view class="coupon-detail-item">
					<view class="coupon-detail-item-title">使用须知</view>
					<view class="coupon-detail-item-content">{{ couponParam.Condition }}</view>
				</view>
			</view>
			<view class="coupon-param-operation"><view class="bottom-operatio-btn" @click="closeCouponParamPopup">确定</view></view>
		</uni-popup>
	</view>
</template>

<script>
import couponImg from '@/static/images/coupon-img.png';
import { errorToShow } from '@/config/common.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { getStoreCouponNewInfoById } from '@/constant/customer.js';

export default {
	components: { uniPopup },
	props: {
		customerCouponList: {
			type: Array,
			default: function() {
				return [];
			}
		},
		totalMoney: {
			type: Number,
			default: 0
		}
	},
	filters: {
		formatTime: function(value) {
			if (!value) {
				return '';
			}
			return value.replaceAll('-', '.');
		}
	},
	data() {
		return {
			couponImg: couponImg,
			totalCouponAmount: 0,
			selectedCouponList: [],
			couponParam: {
				Condition: '无',
				OkDay: '',
				OkWeek: '无',
				Remarks: '无'
			},
			couponDetail: {}
		};
	},
	methods: {
		cancelBtn() {
			this.$emit('cancelBtn');
		},
		selectCoupon: function(item) {
			if (!item.IsEnabled) {
				this.getStoreCouponNewInfoById(item);
				return;
			}
			this.clickCouponItem(item);
		},
		clickCouponItem(item) {
			this.$emit('clickCouponItem', item);
		},
		async getStoreCouponNewInfoById(item) {
			this.couponDetail = item;
			let { StoreCouponNewParamInfo } = await getStoreCouponNewInfoById({ Id: item.StoreCouponNewId });
			if (StoreCouponNewParamInfo) {
				this.couponParam = StoreCouponNewParamInfo;
			} else {
				this.couponParam = {
					Condition: '无',
					OkDay: '',
					OkWeek: '无',
					Remarks: '无'
				};
			}
			this.$refs.couponDetailPopup.open();
		},
		closeCouponParamPopup() {
			this.$refs.couponDetailPopup.close();
		},
		confirmSelectedCoupon() {
			this.selectedCouponList = this.$props.customerCouponList.filter(item => item.IsActive);
			this.$emit('confirmSelectedCoupon', this.selectedCouponList);
		}
	}
};
</script>

<style lang="scss" scoped>
.main-container {
	height: 90vh;
	background-color: $main-page-color;
	padding-top: 30rpx;
	border-radius: 20rpx 20rpx 0 0;
}
.main-context {
	height: calc(100% - 100rpx);
	position: absolute;
	bottom: 100rpx;
	left: 0rpx;
	width: 100%;
}
.bottom-operation-container {
	position: absolute;
	bottom: 0;
	display: flex;
	height: 120rpx;
	width: 100%;
	align-items: center;
	justify-content: space-around;
	border-top: 2rpx solid $main-line-color-split;
	background-color: #ffffff;
}

.bottom-middle-line {
	width: 2rpx;
	height: 100%;
	background-color: $main-line-color-split;
}
.bottom-operatio-btn {
	display: flex;
	justify-content: center;
	width: 49%;
	color: $main-text-color-blue;
}

.coupon-min-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 170rpx;
}

.no-coupon {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: $main-page-color-gray;
}

.main-context-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20rpx;
	// height: calc(100% - 20rpx);
}
.customer-coupon-item {
	position: relative;
	margin-bottom: 20rpx;
	width: 100%;
	height: 210rpx;
	margin-right: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.customer-coupon-item-context {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.no_avaiable {
	transform: rotate(45deg);
	font-size: $main-text-size-32;
	color: #ff0000;
	padding: 10rpx;
	border: solid 2rpx #ff0000;
	width: 100rpx;
	position: absolute;
	top: 44rpx;
	right: 10rpx;
}

.context-left {
	width: 32vw;
	height: 100%;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	.coupon-min {
		font-size: $main-text-size-24;
		padding-top: 20rpx;
		border-top: 2rpx dashed;
	}
	.coupon-amout {
		font-size: 60rpx;
	}

	.coupon-amout-unit {
		font-size: $main-text-size-24;
	}

	.coupon-left-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.coupon-left-line {
			width: 78rpx;
			border-top: 2rpx dashed;
			margin-bottom: 20rpx;
		}
	}
}
.context-middle {
	height: 100%;
	width: calc(100vw - 33vw - 120rpx);
	&-context {
		margin-left: 20rpx;
		margin-top: 24rpx;

		.coupon-type-name {
			padding: 4rpx;
			padding-left: 12rpx;
			background-color: #ed5875;
			color: #fff;
			border-radius: 6rpx;
			padding-right: 12rpx;
			font-size: $main-text-size-24;
		}

		.coupon-name {
			font-size: $main-text-size-32;
			margin-bottom: 26rpx;
			font-weight: 600;
			color: $main-text-color-gray-black;
		}
		.coupon-time-container {
			font-size: $main-text-size-24;
			color: $main-text-color-grey;
		}
	}
}

.context-right {
	height: 100%;
	width: 120rpx;
	display: flex;
	justify-content: center;
	align-items: center;

	.context-right-container {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;

		.text {
			font-size: $main-text-size-20;
			color: #fff;
			padding: 8rpx 18rpx;
			background-color: #ed5875;
			border-radius: 8rpx;
		}
	}
}

.selected-coupon {
	border: 2rpx solid #5d20d5;
}
.coupon-param-contianer {
	padding: 40rpx 20rpx 20rpx 20rpx;
	font-size: 26rpx;
	background-color: #ffffff;
	width: 80vw;
	.coupon-detail-item {
		margin-bottom: 10px;
		display: flex;
	}

	.coupon-detail-item-title {
		color: $main-text-color-gray-33;
		margin-right: 10px;
		width: 20%;
	}

	.coupon-detail-item-content {
		color: $main-text-color-gray-black;
		margin-right: 10px;
		width: 80%;
	}
}
.coupon-param-operation {
	background-color: #fff;
	border-top: 2rpx solid $main-line-color-split;
	height: 90rpx;
	line-height: 90rpx;

	.bottom-operatio-btn {
		width: 100%;
	}
}
</style>
